//我要澄清提交页面
<template>
  <div class="div-main">
    <div class="div-top">
      <group class="group-main">
        <cell>
          <div slot="title"
               class="head">{{pageData1.InviteBidTopic}}</div>
          <div slot="inline-desc"
               class="div-desc">
            <div>发标日期:&nbsp;{{pageData1.EmitBidTime}}</div>
          </div>
        </cell>
      </group>
    </div>
    <x-textarea height="200"
                v-model="pageData2.content"
                placeholder="请输入澄清内容"></x-textarea>
    <ul class="img-list">
      <li v-for="(item,index) in files"
          :key="index" >
        <div class="bg-img"
             :style="{backgroundImage: 'url('+item.blob+')'}">
             
         <img src="../../assets/img/deletefile.png" class="delete" @click="deleteFile(item)"  >
             </div>
      </li>
      <li>
        <vue-file-upload class="upload"
                         label=""
                         url=''
                         ref="vueFileUploader"
                         :multiple="true"
                         v-bind:filters="filters"
                         v-bind:events='cbEvents'
                         v-bind:request-options="reqopts"
                         v-on:onAdd="onAddItem"></vue-file-upload>
      </li>
    </ul>
    <x-button type="warn" @click.native="commit()">提交</x-button>
  </div>
</template>

<script>
import { Group, Cell, XButton, dateFormat, XTextarea } from 'vux'
import { InviteBidAskService } from '../../service/Services'
import VueFileUpload from 'vue-file-upload'

export default {
  name: 'InviteBidAskForm',
  components: {
    VueFileUpload,
    Group,
    Cell,
    XButton,
    XTextarea
  },
  data () {
    return {
      pageData1: {},
      pageData2: { content: '' },
      files: [],
      filters: [
        {
          name: 'imageFilter',
          fn (file) {
            let type = '|' + file.type.slice(file.type.lastIndexOf('/') + 1) + '|'
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1
          }
        }
      ],
      // 回调函数绑定
      cbEvents: {

      },
      // xhr请求附带参数
      reqopts: {
        formData: {
          tokens: 'tttttttttttttt'
        },
        responseType: 'json',
        withCredentials: false
      }
    }
  },
  methods: {
    commit () {
      if (this.pageData2.content === '') {
        this.$vux.toast.show({
          text: '请输入澄清内容',
          type: 'warn',
          width: '180px'
        })
        return
      }
      this.$vux.loading.show({
        text: '提交中...'
      })
      var base64FileData = []
      this.files.forEach(item => {
        var reader = new FileReader()
        reader.readAsDataURL(item.file)
        reader.onload = function () {
          base64FileData.push(this.result)
        }
      })
      let me = this
      setTimeout(function () {
        let strFileData = ''
        for (var i = 0; i < base64FileData.length; i++) {
          base64FileData[i] = base64FileData[i].split(',')[1]
          if (i !== base64FileData.length - 1) {
            strFileData += base64FileData[i] + '@'
          } else {
            strFileData += base64FileData[i]
          }
        }
        // 调用后台API，把base64FileData传给后台
        let data = {
          Content: me.pageData2.content,
          InquiryGUID: me.$route.query.InquiryGUID,
          PhoBase64: strFileData,
          ProviderGUID: me.$store.getters.getUserInfo.ProviderGUID
        }

        InviteBidAskService.submitInviteBidAsk(data).then((res) => {
          me.$vux.loading.hide()
          if (res.Result) {
            me.$vux.toast.show({
              text: '提交成功',
              type: 'suggest',
              width: '180px'
            })
            me.$router.push({path: '/demos/invite-bid-ask-list'})
          } else {
            me.$vux.toast.show({
              text: res.ErrorMessage,
              type: 'cancel',
              width: '180px'
            })
          }
        })
      }, 200)
    },
    deleteFile (file) {
      file.remove()
    },
    onAddItem (files) {
      this.files = files
      this.files.forEach(item => {
        item.blob = window.URL.createObjectURL(item.file)
      })
    },
    loadData () {
      InviteBidAskService.getInviteBid(this.$route.query.inviteBidGUID).then((res) => {
        let item = res.Data[0]
        item.InviteBidTopic = item.InviteBidTopic ? item.InviteBidTopic : ''
        item.EmitBidTime = item.EmitBidTime ? this.formatDate(item.EmitBidTime) : ''
        this.pageData1 = item
      }).catch((res) => {
        this.$vux.toast.show({
          text: '请求失败,请联系管理员',
          type: 'cancel',
          width: '180px'
        })
      })
    },
    formatDate (myDate) {
      var msec = myDate.match(/\d+[+]\d+/gi)
      return dateFormat(new Date(Number.parseInt(msec)), 'YYYY-MM-DD')
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style scoped lang='less'>
button.weui-btn{
      width: 90%;
          margin-top: 25px;
}

.weui-cell {
  padding: 0!important;
  margin: 10px 0;
}

.main {
  margin-top: 20px;
}

ul.img-list {
  background: white;
  list-style: none;
      padding: 10px 15px;
  li {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    width: 80px;
    height: 80px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px dashed #cbcbcb;
    .bg-img {
      width: 100%;
      height: 100%;
      background-size: cover;
    }
    .upload {
      width: 80px;
      height: 80px;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 0 none;
      background-color: #f5f5f5;
      &:after {
        content: '+';
        font-size: 50px;
        color: #cbcbcb;
      }
    }
    &:last-child {
      margin-left: -4px;
    }
  }
}

.head {
  font-weight: bold;
  font-size: 19px;
  color: #111111;
}

.content {
  margin: 10px 20px 10px 20px;
  font-size: 14px;
  color: #7F7F7F;
  letter-spacing: 0;
  line-height: 30px;
  border-top: 1px solid #E5E5E5;
  padding-top: 10px;
  padding-bottom: 10px;
}

.div-date {
  color: #888888;
}

.div-name {
  margin-left: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
}

.div-name span {
  display: inline-block;
  height: 25px;
  width: 4px;
  background: #DC220B;
  position: relative;
  top: 6px;
  margin-right: 10px;
}

.div-item {
  margin-bottom: 10px;
}

.span-suggest {
  background: #EA3C00;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  width: 24px;
  height: 24px;
  text-align: center;
  margin: 0 10px 0 20px;
}

.div-left {
  float: left;
}

.div-right {
  float: right;
}

.div-clear {
  clear: both;
}

.span-answer {
  background: #27C86B;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  width: 24px;
  height: 24px;
  text-align: center;
  margin: 0 10px 0 20px;
}

.div-header {
  margin-bottom: 10px;
}

.div-bottom {
  // margin-top: 20px;
  border-top: 1px solid #E5E5E5;
  padding-top: 20px;
}

.button-init {
  background-color: white;
  font-size: 12px;
  height: 23px;
  line-height: 23px;
  padding: 0 12px;
  border-radius: 20px;
  display: inline-block;
  border: 1px solid #888888;
}

.div-right-width {
  width: 82%;
}

.div-top {}

.button-red {
  box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.05);
  border-top: 1px solid #e5e3e6;
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
  background-color: red;
}

.button {
  margin-top: 20px;
  font-size: 17px;
  height: 50px;
  line-height: 50px; // padding: 0 12px;
  display: inline-block;
  width: 100%;
  text-align: center;
}

.img-word {
  width: 40px;
  height: 40px;
}

.div-main {
  word-wrap: break-word;
  font-family: PingFangSC-Regular;
}

.span-word {
  margin-left: 10px;
  position: relative;
  bottom: 14px;
}

.div-suggest-content {
  margin-top: 5px;
}

.div-word,
.div-pic {
  margin-top: 15px;
}

.div-top-date {
  padding-top: 22px;
}

.img-ask {
  width: 20px;
  height: 20px;
  position: relative;
  top: 3px;
}
 .delete {
   position: relative;
    top: 0px;
    left: 52px;
    width: 25px;
    height: 25px;
    z-index: 1000;
  }
</style>
